﻿@{
    Layout = null;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <style>
        .right {
            display: none
        }
        #app {
            margin-top : -25px;
            margin-left : auto;
            /*margin : -20px,0px,0px,25px;*/
        }
        #Hotel_BigPic {
            margin-left : 40px
        }
        #Hotel_SmallPic {
            margin-left : 40px
        }
        #demo1 {
            margin-left : 40px
        }
        #demo2 {
            margin-left : 40px
        }
    </style>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="renderer" content="webkit|ie-comp|ie-stand" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link href="~/assets/css/bootstrap.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="~/css/style.css" />
    <link href="~/assets/css/codemirror.css" rel="stylesheet" />
    <link rel="stylesheet" href="~/assets/css/ace.min.css" />
    <link rel="stylesheet" href="~/font/css/font-awesome.min.css" />
    <link href="~/static/common/layui/css/layui.css" rel="stylesheet" />
    <link rel="stylesheet" href="~/static/admin/css/style.css" />

    <!--[if lte IE 8]>
      <link rel="stylesheet" href="assets/css/ace-ie.min.css" />
    <![endif]-->
    <script src="~/static/common/jquery-3.3.1.min.js"></script>
    <script src="~/assets/js/bootstrap.min.js"></script>
    <script src="~/assets/js/typeahead-bs2.min.js"></script>
    <script src="~/assets/js/jquery.dataTables.min.js"></script>
    <script src="~/assets/js/jquery.dataTables.bootstrap.js"></script>
    <script src="~/static/common/layui/layui.js"></script>
    <script src="~/assets/layer/layer.js" type="text/javascript"></script>
    <script src="~/assets/laydate/laydate.js" type="text/javascript"></script>
    <script src="~/Scripts/Format.js"></script>
    <script src="~/static/common/layui/lay/modules/laytpl.js"></script>

    <title>酒店管理</title>
</head>

<body>
    <div class="margin clearfix">
        <div class="" id="Other_Management">
            <div class="border clearfix">
                <span class="l_f">
                    <a href="#" class="btn btn-danger" id="add">&nbsp;添加</a>
                </span>
            </div>
            <div class="list_style">
                <table class="layui-hide" id="test" lay-filter="demo"></table>
                <script type="text/html" id="barDemo">
                    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
                    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                </script>
            </div>
            <script type="text/html" id="imgUrl">
                <img src="{{d.Hotel_BigPic}}" />
            </script>
        </div>
    </div>

    @*添加/编辑*@
    <div class="right" id="app">
        <fieldset class="layui-elem-field layui-field-title">
            <legend></legend>
        </fieldset>
        <div class="layui-form">
            <div class="layui-form-item">
                <input type="hidden" name="HotelId" id="HotelId" class="layui-input" />
                <input type="hidden" name="HotelDetails_Id" id="HotelDetails_Id" class="layui-input" />
                <label class="layui-form-label">酒店名称</label>
                <div class="layui-input-block">
                    <input type="text" name="HotelName" id="HotelName" required=required lay-verify="required" placeholder="" autocomplete="off" class="layui-input" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">酒店联系电话</label>
                <div class="layui-input-block">
                    <input type="text" name="Hotel_Tel" id="Hotel_Tel" required=required lay-verify="required" placeholder="" autocomplete="off" class="layui-input" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">目的地</label>
                <div class="layui-input-block">
                    <input type="text" name="EndPlace" id="EndPlace" required=required lay-verify="required" placeholder="" autocomplete="off" class="layui-input" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">酒店地址</label>
                <div class="layui-input-block">
                    <input type="text" name="HotelAddress" id="HotelAddress" required=required lay-verify="required" placeholder="" autocomplete="off" class="layui-input" />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">房数</label>
                <div class="layui-input-block">
                    <input type="text" name="NumberOfRooms" id="NumberOfRooms" required=required lay-verify="required" placeholder="" autocomplete="off" class="layui-input" />
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-upload">
                    <label class="layui-form-label">主图</label>
                    <button type="button" class="layui-btn" id="Hotel_BigPic" height:auto;">上传图片</button>
                    <div class="layui-upload-list">
                        <label class="layui-form-label">图片上传展示</label>
                        <img class="layui-upload-img" id="demo1" style="width:200px;height:auto;" />
                        <p id="demoText"></p>
                    </div>
                </div>
            </div>
            <div class="layui-form-item" id="no2">
                <div class="layui-upload">
                    <label class="layui-form-label">次图</label>
                    <button type="button" class="layui-btn" id="Hotel_SmallPic" height:auto;">上传图片</button>
                    <div class="layui-upload-list">
                        <label class="layui-form-label">图片上传展示</label>
                        <img class="layui-upload-img" id="demo2" style="width:200px;height:auto;" />
                        <p id="demoTexts"></p>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">酒店描述</label>
                <div class="layui-input-block">
                    <input type="text" name="Describe" id="Describe" required=required lay-verify="required" placeholder="" autocomplete="off" class="layui-input" />
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">酒店级别</label>
            <div class="layui-input-block" style="margin-left:120px">
                <select name="Level" id="Level" aria-controls="sample-table" class="">
                    <option value="1">一星</option>
                    <option value="2">二星</option>
                    <option value="3">三星</option>
                    <option value="4">四星</option>
                    <option value="5">五星</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">酒店类型</label>
            <div class="layui-input-block" style="margin-left:120px">
                <select name="TotelType" id="TotelType" aria-controls="sample-table" class="">
                    <option value="连锁型">连锁型</option>
                    <option value="观光型">观光型</option>
                    <option value="公寓型">公寓型</option>
                    <option value="度假型">度假型</option>
                    <option value="经济型">经济型</option>
                    <option value="商务型">商务型</option>
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="button" id="commit" value="立即提交" class="layui-btn" />
            </div>
        </div>
    </div>
</body>
</html>
<script>
    //显示
    $(function () {
        layui.use('table', function () {
            var table = layui.table;
            table.render({
                elem: '#test'
                , url: '/Hotel/QueryHotel'
                , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
                , cols: [[
                    { type: 'checkbox' } //开启复选框
                    , { field: 'HotelId', title: '酒店Id', sort: true, width: 100 }
                    , { field: 'HotelDetails_Id', title: '酒店详细Id', sort: true, width: 100 }
                    , { field: 'HotelName', title: '酒店名称', sort: true }
                    , { field: 'Level', title: '酒店级别 ', sort: true, width: 120 }
                    , { field: 'Hotel_Tel', title: '酒店联系电话', sort: true }
                    , { field: 'TotelType', title: '酒店类型', sort: true, width: 120 }
                    , { field: 'EndPlace', title: '目的地', sort: true, width: 100 }
                    , { field: 'Describe', title: '酒店描述', sort: true }
                    , { field: 'HotelAddress', title: '详细地址', sort: true }
                    , { field: 'NumberOfRooms', title: '房数', sort: true, width: 120 }
                    , { field: 'Hotel_BigPic', title: '主图', sort: true, templet: '#imgUrl' }
                    , { fixed: 'right', title: '操作', toolbar: '#barDemo', width: 120 }
                ]]
                , page: true
                , id: 'testReload'
            });
            //监听行工具事件
            table.on('tool(demo)', function (obj) {
                var data = obj.data;
                if (obj.event == 'edit') {
                    layer.open({
                        type: 1,
                        title: '修改信息',
                        area: ['800px', ''],
                        shadeClose: false,
                        content: $("#app"),
                    });

                    $("#HotelId").val(data.HotelId);
                    $("#HotelDetails_Id").val(data.HotelDetails_Id);
                    $("#HotelName").val(data.HotelName);
                    $("#Hotel_Tel").val(data.Hotel_Tel);
                    $("#EndPlace").val(data.EndPlace);
                    $("#HotelAddress").val(data.HotelAddress);
                    $("#NumberOfRooms").val(data.NumberOfRooms);
                    $("#demo1").attr("src",data.Hotel_BigPic);
                    $("#demo2").attr("src",data.Hotel_SmallPic);
                    $("#Describe").val(data.Describe);
                    $("#Level").val(data.Level);
                    $("#TotelType").val(data.TotelType);

                    $("#commit").click(function () {
                        var hotel = {};
                        hotel.HotelId = $("#HotelId").val();
                        hotel.HotelDetails_Id = $("#HotelDetails_Id").val();
                        hotel.HotelName = $("#HotelName").val();
                        hotel.Hotel_Tel = $("#Hotel_Tel").val();
                        hotel.EndPlace = $("#EndPlace").val();
                        hotel.HotelAddress = $("#HotelAddress").val();
                        hotel.NumberOfRooms = $("#NumberOfRooms").val();
                        hotel.Hotel_BigPic = imageUrl;
                        hotel.Hotel_SmallPic = imageUrls;
                        hotel.Describe = $("#Describe").val();
                        hotel.Level = $("#Level").val();
                        hotel.TotelType = $("#TotelType").val();

                        $.ajax({
                            type: "post",
                            data: hotel,
                            url: "/Hotel/UpdateHotel",
                            success: function (result) {
                                if (result.Success) {
                                    layer.msg('修改成功！', {
                                        title: '提示框',
                                        icon: 1,
                                        time: 2000
                                    }
                                        , function () { window.location.reload() });
                                } else {
                                    layer.msg('修改失败！', {
                                        title: '提示框',
                                        icon: 1,
                                        time: 2000
                                    });
                                }
                            }
                        });
                    });
                } else if (obj.event == 'del') {
                    layer.confirm('真的删除行么', function (index) {
                        $.ajax({
                            url: "/Hotel/DeleteHotel?id=" + data.HotelId,
                            type: "post",
                            success: function (data) {
                                if (data.Success) {
                                    layer.msg('删除成功！', {
                                        title: '提示框',
                                        icon: 1,
                                        time: 2000
                                    }, function () {
                                        TableReload();
                                        layer.close(index);
                                    });
                                    window.location.reload();
                                }
                                else {
                                    layer.msg('删除失败！', {
                                        title: '提示框',
                                        icon: 1,
                                        time: 2000
                                    });
                                }
                            }
                        });
                    });
                }
            });
        });
    });
</script>
<script type="text/javascript">
    var imageUrl;//新增代码，保存上传图片后回传的图片路径
    var imageUrls;
    layui.use('upload', function () {
        var $ = layui.jquery;
        var upload = layui.upload;
        //普通图片上传
        var uploadInst = upload.render({
            elem: '#Hotel_BigPic',
            url: '@Url.Action("Upload","Hotel")',
            before: function (obj) {
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result);
                });
            },
            done: function (res) {
                if (res.Result) {
                    //新增代码，将回传的图片保存路径进行保存并将图片绑定到上传后图片展示处
                    imageUrl = res.Data;
                }
            },
            error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });
    });

        layui.use('upload', function () {
        var $ = layui.jquery;
        var upload = layui.upload;
        //普通图片上传
        var uploadInst = upload.render({
            elem: '#Hotel_SmallPic',
            url: '@Url.Action("Uploads","Hotel")',
            before: function (obj) {
                obj.preview(function (index, file, result) {
                    $('#demo2').attr('src', result);
                });
            },
            done: function (res) {
                if (res.Result) {
                    //新增代码，将回传的图片保存路径进行保存并将图片绑定到上传后图片展示处
                    imageUrls = res.Data;
                }
            },
            error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoTexts');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
        });
    });

    //添加
    $("#add").click(function () {
        layer.open({
            type: 1,
            title: "添加",
            area: ['800px', ''],
            shadeClose: false,
            content: $("#app"),
        });
        $("#HotelName").val(null);
        $("#Hotel_Tel").val(null);
        $("#EndPlace").val(null);
        $("#HotelAddress").val(null);
        $("#NumberOfRooms").val(null);
        $("#Describe").val(null);;
        $("#Level").val(null);
        $("#TotelType").val(null);

        $("#commit").click(function () {
            if ($("#HotelName").val() != null && $("#HotelName").val() != "" && $("#Hotel_Tel").val() != null && $("#Hotel_Tel").val() != "" && $("#EndPlace").val() != null && $("#EndPlace").val() != "" && $("#HotelAddress").val() != null && $("#HotelAddress").val() != "" && $("#NumberOfRooms").val() != null && $("#NumberOfRooms").val() != "" && $("#Describe").val() != null && $("#Describe").val() != "") {
                var hotel = {};
                hotel.HotelName = $("#HotelName").val();
                hotel.Hotel_Tel = $("#Hotel_Tel").val();
                hotel.EndPlace = $("#EndPlace").val();
                hotel.HotelAddress = $("#HotelAddress").val();
                hotel.NumberOfRooms = $("#NumberOfRooms").val();
                hotel.Hotel_BigPic = imageUrl;
                hotel.Hotel_SmallPic = imageUrls;
                hotel.Describe = $("#Describe").val();
                hotel.Level = $("#Level").val();
                hotel.TotelType = $("#TotelType").val();

                $.ajax({
                    type: "post",
                    data: hotel,
                    url: "/Hotel/AddHotel",
                    success: function (result) {
                        if (result.Success) {
                            layer.msg('添加成功！', {
                                title: '提示框',
                                icon: 1,
                                time: 2000
                            }
                                , function () { window.location.reload() });
                        } else {
                            layer.msg('添加失败！', {
                                title: '提示框',
                                icon: 1,
                                time: 2000
                            });
                        }
                    },
                });
            }
            else {
                layer.msg('不能为空！', {
                    title: '提示框',
                    icon: 1,
                    time: 2000
                });
            }
        });
    });
</script>


<script>
                jQuery(function ($) {
                    var oTable1 = $('#sample-table').dataTable({
                        "aaSorting": [[1, "desc"]],//默认第几个排序
                        "bStateSave": true,//状态保存
                        "aoColumnDefs": [
                            //{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
                            { "orderable": false, "aTargets": [0, 2, 3, 6] }// 制定列不参与排序
                        ]
                    });


                    $('table th input:checkbox').on('click', function () {
                        var that = this;
                        $(this).closest('table').find('tr > td:first-child input:checkbox')
                            .each(function () {
                                this.checked = that.checked;
                                $(this).closest('tr').toggleClass('selected');
                            });

                    });
                });
                /*用户-删除*/
                function member_del(obj, id) {
                    layer.confirm('确认要删除吗？', function (index) {
                        $(obj).parents("tr").remove();
                        layer.msg('已删除!', { icon: 1, time: 1000 });
                    });
                }
            </script>

